<template>
  <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <h2 class="sub-header">留言列表</h2>
    <router-link class="btn btn-success" to="/newmsg">添加留言</router-link>
    <div class="table-responsive">
      <table class="table table-hover table-striped">
        <thead>
          <tr>
            <th>姓名</th>
            <th>内容</th>
            <th>时间</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="info in infos" :key="info.id">
            <td style="width:10%">{{ info.name }}说：</td>
            <td style="width:60%">{{ info.msg }}</td>
            <td style="width:20%">{{ info.time | dateFormat}}</td>
            <td style="width:10%">
              <!-- <a class="btn btn-primary btn-sm">编辑</a> -->
              <a class="btn btn-danger btn-sm" @click="deleteMsg(info.id,info.name)">删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
import { Toast,Indicator } from "mint-ui";
import { deleteMsgData, getMsgData } from "@/apis/data";
export default {
  data() {
    return {
      infos: []
    };
  },
  methods: {
    deleteMsg(index, name) {
      Indicator.open()
      var id = parseInt(index);
      deleteMsgData(id)
        .then(response => {
          this.getInfos();
          Indicator.close()
        })
        .catch(function() {
          console.log("服务器异常！");
        });
    },
    getInfos() {
      getMsgData().then(res => {
        this.infos = res.data;
      });
    }
  },
  created() {
    this.getInfos();
  }
};
</script>
<style>
</style>
